<template>
	<el-dialog v-model="visible" :destroy-on-close="true" :width="800" top="5" :title="`${dialogData.title}参数`">
		<el-form ref="ruleFormRef" :rules="rules" :disabled="dialogData.isView" :model="dialogData.rowData" label-width="100px">
			<el-row>
				<el-col :span="12">
					<el-form-item label="模型名称" prop="modelName" clearable>
						<el-input v-model="dialogData.rowData!.modelName" placeholder="请输入模型名称"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="模型标识" prop="modelKey" clearable>
						<el-input v-model="dialogData.rowData!.modelKey" placeholder="请输入模型标识"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
            <el-row>
				<el-col :span="12">
					<el-form-item label="模型类型" prop="category" clearable>
						<el-input v-model="dialogData.rowData!.category" placeholder="请输入模型类型"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
            <el-row>
                <el-col :span="24">
					<el-form-item label="备注" prop="remark" clearable>
						<el-input type="textarea" :rows="2" v-model="dialogData.rowData!.remark" placeholder="请输入备注信息"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" v-show="!dialogData.isView" @click="handleSubmit">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="UserDialog">
import { ref, reactive } from 'vue';
import { ElMessage, FormInstance, FormRules, ElMessageBox } from 'element-plus';

import rulesObj from './rules';

//验证规则
const rules = reactive<FormRules>(rulesObj);

//定义弹框props参数
interface DialogProps {
	title: string;
	isView: boolean;
	rowData?: any;
	apiUrl?: (params: any) => Promise<any>;
	getTableList?: () => Promise<any>;
}

// drawer框状态
const visible = ref(false);
const dialogData = ref<DialogProps>({
	isView: false,
	title: '',
});

// 接收父组件传过来的参数
const acceptParams = (params: DialogProps): void => {
	dialogData.value = params;
	visible.value = true;
};

const ruleFormRef = ref<FormInstance>();
// 提交数据（新增/编辑）
const handleSubmit = () => {
	ruleFormRef.value!.validate((valid) => {
		if (!valid) return;
        if (!dialogData.value.apiUrl) return;
        ElMessageBox.confirm(`确定${dialogData.value.title}吗?`,'提示', {type: 'warning'}).then(async () => {
            const res = await dialogData.value.apiUrl(dialogData.value.rowData);
            if(res) {
                ElMessage.success({ message: `${dialogData.value.title}用户成功！` });
                dialogData.value.getTableList && dialogData.value.getTableList();
                visible.value = false;
            }
        });
	});
};

defineExpose({
	acceptParams,
});
</script>
